<template>
<div class="yonhui">
	<themeHeader title="优惠券"></themeHeader>
	<a class="yh-quan" href="javascript:viod(0)" v-for="i in quanItems">
		<div>
			<div class="yhq-left">
			<span>￥{{i.money}}</span>
				{{i.explain}}
			</div>
			<div class="yhq-right">
				<p class="yhqr-top"><span>{{i.num}}</span><span>{{i.time}}</span></p>
				<p class="yhqr-bottom">{{i.con}}</p>
			</div>
		</div>
	</a>
</div>	
</div>


</template>
<style type="text/css">

.yonhui{
	padding-top: 50px;
	background: white;
}
.yh-quan{
	display: block;
	margin: 0 auto 20px;
	width: 95%;
	padding: 15px;
	background: url(http://img05.yiguoimg.com/e/web/160225/00891/112058/bg-coupon1.png);
	font-size: 12px;
	box-shadow: 0px 1px 1px 1px #d8d4d4;
}
.yh-quan>div{display: flex;border-radius: 6px;border: 1px solid #fc8e34;}
.yhq-left{
	width: 25%;
	height: 100px;
	background: #fc8e34;
	text-align: center;
	color: white;
	/*vertical-align: middle;*/
 
}	
.yhq-left>span{
    display: block;
    padding-top: 20px;
    font-weight: bold;
	font-size: 26px;
}
.yhq-right{
	width: 75%;
	height: 100%;
	
}
.yhqr-top{
	border-bottom: 1px dotted #8d8a8a;
	color: #8d8a8a;
	height: 25px;
	display: flex;
	justify-content: space-between;
}
.yhqr-top span{
	padding: 0 5px;
}
.yhqr-bottom{
	height:75px;
	color:  #fc8e34;
	vertical-align: middle;
	display: flex;
	justify-content:center;
	align-items:center;
}
</style>
<script type="text/javascript">
import ThemeHeader from "./themeHeader.vue";
	export default{
		data(){
			return{
				quanItems:[
					{money:50,explain:"满188元可用",con:"新人注册全网满188减50",num:"HYYX16110807",time:"2017-03-02"},
					{money:30,explain:"满99元可用",con:"新人注册全网满99减30",num:"HYYX16110806",time:"2017-03-02"},
					{money:50,explain:"买特定商品可用",con:"Zespri佳沛意大利绿奇异果3.3kg原箱(30-36个)，用券立减50，券后价：108元，维c满满，活力多多，原箱鲜果！",num:"P17020602Q",time:"2017-02-28"},
					{money:40,explain:"买特定商品可用",con:"Zespri佳沛意大利阳光金奇异果3.3kg原箱，用券立减40，券后价：258元，黄金小巨人，原箱鲜果好礼！",num:"P17011701Q",time:"2017-02-28"},
				],
			}
		},
		components:{
			ThemeHeader,
		}
		
	}
</script>